<template>
	<div>
		<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>流程报表</el-breadcrumb-item>
                <el-breadcrumb-item>报表配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
		
		<!-- 查询表单 -->
		<el-form :inline="true" :model="search" label-width="90px">
			<el-form-item label="报表名称">
				<el-input v-model="search.reportName" size="small" placeholder="报表名称"></el-input>
			</el-form-item>

			<el-form-item label="相关工作流">
				<el-select filterable v-model="search.workflowId" placeholder="相关工作流">
					<el-option  v-for="item in workflowOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>

			<!-- <el-form-item label="权限范围">
				<el-select v-model="search.authId" placeholder="权限范围">
					<el-option v-for="item in authOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item> -->
			<el-row style="text-align: center;">
				<el-form-item>
					<el-button type="primary" plain @click="searchTable" icon="el-icon-search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="info" plain @click="resetForm(search)" icon="el-icon-refresh">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" plain @click="addReportEditor" icon="el-icon-edit">新增</el-button>
				</el-form-item>
			</el-row>
		</el-form>
		<!-- 查询表单 End-->
		
		<!-- 编辑表单 -->
		<el-dialog title="报表基本信息编辑" :visible.sync="isEditable" center>
			<el-form :model="editer" ref="reportEditInfo" label-width="120px">
				<el-form-item label="报表名称" :rules="{required: true, message: '请填写报表名称', trigger: 'blur'}" prop="reportName">
					<el-input v-model="editer.reportName" size="small" placeholder="报表名称"></el-input>
				</el-form-item>

				<el-form-item label="相关工作流" :rules="{type: 'number', required: true, message: '请选择相关工作流', trigger: 'change'}" prop="workflowId">
					<el-select filterable v-model="editer.workflowId" placeholder="相关工作流">
						<el-option v-for="item in workflowOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>

				<!-- <el-form-item label="权限范围" :rules="{type: 'number', required: true, message: '请选择权限范围', trigger: 'change'}" prop="authId">
					<el-select v-model="editer.authId" placeholder="权限范围">
						<el-option v-for="item in authOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="info" @click="cancelEdit">取消</el-button>
				<el-button type="primary" @click="finishedEdit('reportEditInfo')">确定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑表单 End-->

		<!--报表配置列表 -->
		<el-table :data="workflowData" border highlight-current-row v-loading="listLoading" :stripe="true" :fit="true" style="width: 100%;">
			<el-table-column type="selection" width="40" align="center"></el-table-column>
			<el-table-column type="index" width="35"></el-table-column>
			<el-table-column prop="reportName" label="报表名称" min-width="80" sortable></el-table-column>
			<el-table-column prop="workflowName" label="相关工作流" min-width="120" sortable></el-table-column>
			<!-- <el-table-column label="权限范围" prop="authId" min-width="80" :filters="filterData" :filter-method="filterTag">
				<template scope="scope">
					<el-tag :type="scope.row.authType">{{scope.row.authName}}</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column label="报表基本配置" min-width="130" align="center" >
				<template scope="scope">
					<el-button type="primary" plain size="small" @click="reporHeaderEdit(scope.$index, scope.row)">配置显示字段</el-button>
					<el-button type="info" plain size="small" @click="reporToolEdit(scope.$index, scope.row)">配置查询字段</el-button>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="150" align="center">
				<template scope="scope">
					<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row, editer)">编辑</el-button>	
					<!-- 删除提示tooltip -->
					<el-popover ref="popoverDelete" placement="top"  v-model="scope.row.visible">
						<p>确定要删除这条数据吗?</p>
						<div style="text-align: center;">
							<el-button size="mini" type="success" @click="scope.row.visible = false">取消</el-button>
							<el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">确定</el-button>
						</div>
						<el-button type="danger" size="small" slot="reference" >删除</el-button>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<!-- 报表配置列表-分页 -->
		<div class="pagination">
            <el-pagination
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.pagesize"
                    :current-page="pagination.page"
                    layout="sizes, prev, pager, next"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <!--报表配置列表 End -->
		
		<!-- 报表字段配置对话框 -->
		<header-edit-dlg :isConfigField.sync="isConfigField" :configRow="configRow"></header-edit-dlg>
		<!-- 报表字段配置对话框 End-->

		<!-- 报表工具栏配置对话框 -->
		<tool-edit-dlg :isConfigTool.sync="isConfigTool" :configRow="configRow"></tool-edit-dlg>
		<!-- 报表工具栏配置对话框 End-->

	</div>
</template>

<script>
	import headerDialog from '../../components/dialog/tableHeaderDialog.vue'
	import toolDialog from '../../components/dialog/tableToolDialog.vue'

	export default {
		data (){
			return {
				// 相关工作流Option数据
				workflowOptions: [],
				// 权限范围Option数据
				authOptions: [],

				// 查询参数
				search: {
					reportName: '',
					workflowId: '',
					authId: ''
				},

				// 表格加载动画
				listLoading: false,
				// 报表配置数据
				workflowData: [],
				// 报表配置-分页数据
				pagination: {
					// 分页大小
					pagesize: 10,
					// 当前页
					page: 1,
					// 所有页总数
					total: 1,
				},

				// tag过滤数据
				filterData: [],

				// 删除数据状态
				// isDelete: false,
				
				// 启用工具编辑对话框
				isConfigTool: false,
				// 启用字段编辑对话框
				isConfigField: false,
				configRow: {
					reportName:'',
					workflowId: ''
				},

				// 启用新增
				isAdd: false,
				// 启用编辑对话框
				isEditable: false,
				// 对话框表单数据
				editer: {
					id: '',
					reportName: '',
					workflowId: '',
					authId: ''
				}
			}
		},
		mounted: function(){
			// 初始化表格
			this.searchTable();
			this.$http.post('/api/report/filterTag').then(response => {
				this.filterData = response.data;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
			this.$http.post('/api/report/workflowOptions').then(response => {
				this.workflowOptions = response.data;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
			this.$http.post('/api/report/authOptions').then(response => {
				this.authOptions = response.data;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
		},
		components: {
			'header-edit-dlg': headerDialog,
			'tool-edit-dlg': toolDialog
		},
		methods: {
			// 表格查询
			searchTable: function(){
				this.listLoading = true;
				this.$http.post('/api/report/query', {search: this.search, page: this.pagination.page, rows: this.pagination.pagesize}, {emulateJSON: true}).then(response => {
					this.listLoading = false;
					var data = response.data;
					this.workflowData = data.rows;
					this.pagination.total = data.total;
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
					this.listLoading = false;
				});
			},
			// 重置表单数据
			resetForm: function(obj){
				for (let item in obj){
					obj[item] = '';
				}
			},

			// 表格数据过滤
			filterTag: function(value, row){
				console.log(row.authId);
				console.log(value);
				var type = row.authId === value;
				return type;
			},

			// 新增配置项
			addReportEditor: function(formName){
				this.isEditable = true;
				this.resetForm(this.editer);
			},

			/* 对话框编辑 */
			// 激活对话框编辑 -> 表格配置信息编辑
			handleEdit: function(column, row, editer){
				for (let item in editer){
					editer[item] = row[item];
				}
				this.isEditable = true;
			},
			// 删除表格数据操作
			handleDel: function(index, row){
				this.$http.post('/api/report/delete', {id: row.id}, {emulateJSON: true}).then(response => {
					console.log('删除数据！！');
					// 刷新表格数据
					this.searchTable();
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 取消对话框编辑
			cancelEdit: function(){
				this.resetForm(this.editer);
				this.isEditable = false;
			},
			// 完成对话框编辑
			finishedEdit: function(formName){
				this.$refs[formName].validate((valid) => {
					if (valid){
						this.$http.post('/api/report/saveEdit', {editer: this.editer}, {emulateJSON: true}).then(response => {
							this.isEditable = false;
							this.searchTable();
						}, response => {
							console.log('Ajax can not get the data from the server!!!');
						});
					} else {
						this.$notify({
							title: '错误',
							message: '信息填写不完整！',
							type: 'error'
						});
					}
				});
				
			},
			/* 对话框编辑 End */

			/* 表格分页 */
			// 改变页码
			handlePageChange: function(currentPage){
				this.$http.post('/api/report/query', {search: this.search, page: currentPage, rows: this.pagination.pagesize}).then(response => {
					this.workflowData = response.data.rows;
					this.pagination.total = response.data.total;
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 改变页面大小
			handleSizeChange: function(size){
				this.pagination.pagesize = size;
				this.handlePageChange(this.pagination.page);
			},
			/* 表格分页 End */

            // 激活表格表头编辑             
            reporHeaderEdit: function(column, row){
            	this.isConfigField = true;
            	console.log(row);
            	this.configRow = row;
			},
			// 激活表格工具栏编辑器
			reporToolEdit: function(column, row){
				this.isConfigTool = true;
				console.log(row);
				this.configRow = row;
			}
		}
	}
</script>

<style>
	.el-form-item--mini.el-form-item, 
	.el-form-item--small.el-form-item{
		margin-bottom: 22px;
	}
</style>